<template>
	<div class="mc-popup-attr">
		<template v-if="!isDetail">
			<Input
				v-model="innerValue"
				:placeholder="inputPlaceholder"
				readonly
			/>
		</template>
		<div v-else>{{ innerValue }}</div>
	</div>
</template>

<script>
import { Input } from 'element-ui';

export default {
	name: 'McPopupAttr',
	components: {
		Input,
	},
	model: {
		prop: 'value',
		event: 'input',
	},
	props: ['showField', 'relationField', 'isDetail', 'isStorage', 'defaultValue'],
	data() {
		return {
			innerValue: this.value,
		};
	},
	computed: {
		inputPlaceholder() {
			if (this.isStorage === 1) {
				return '用于展示关联弹窗的属性，且数据不会保存';
			}
			if (this.isStorage === 2) {
				return '用于展示关联弹窗的属性，且数据同时会保存入库';
			}
			return '';
		},
	},
	watch: {
		value(newVal) {
			this.innerValue = newVal;
		},
		innerValue(newVal) {
			this.$emit('input', newVal);
		},
	},
	created() {
		//this.$eventBus.$on('popupAttrEventBus', this.handleEventBus);
	},
	destroyed() {
		//this.$eventBus.$off('popupAttrEventBus', this.handleEventBus);
	},
	methods: {
		handleEventBus(val, model) {
			if (!this.showField || !this.relationField || this.relationField !== model) return;
			const obj = val[this.relationField] || {};
			this.innerValue = obj[this.showField] ? obj[this.showField] : '';
			this.$emit('input', this.innerValue);
		},
	},
};
</script>